<template>
	<view>
        <view class="block">
            <view class="title">
                <view class="title-top">
                    <view class="title-top-left">
                        <span v-if="source == 1" style="margin-right:20rpx;"><text style="color:#00CE64;">{{topicIndex + 1}}</text>/{{topicLength}}</span>
                        <text v-if="question.questionType==0">单选题</text>
                        <text v-if="question.questionType==1">多选题</text>
                        <text v-if="question.questionType==2">判断题</text>
                        <text v-if="question.questionType==3">填空题</text>
                        <text v-if="question.questionType==4">简答题</text>
                        <text>（{{questionStudent.questionScore}}分）</text>
                    </view>
                    <img v-if="source == 1" :src="imgUrl+'/inClass/exam/answerSheet1.png'" @tap="handleJump">
                </view>
                <view class="title-bottom" v-if="question.questionType!=4">
                    <jyf-parser :html="question.questionName" :tag-style="tagStyle" @imgtap="imgtap"></jyf-parser>
                </view>
                <!-- 简答 -->
                <view class="title-discuss" v-if="question.questionType==4">
                    <view class="discuss-main">
                        <jyf-parser :html="question.questionName" :tag-style="tagStyle" @imgtap="imgtap"></jyf-parser>
                    </view>
                    <view class="discuss-answer" v-if="showAnswer">
                        <view>
                            <img :src="`${imgUrl}/inClass/teacher/answer.png`" />
                            <jyf-parser :html="question.answer" :tag-style="tagStyle" @imgtap="imgtap"></jyf-parser>
                        </view>
                        <view>
                            <img :src="`${imgUrl}/inClass/teacher/analysis.png`" />
                            <jyf-parser v-if="analysis.length>0" :html="question.analysis" :tag-style="tagStyle" @imgtap="imgtap"></jyf-parser>
                            <view v-else>暂无解析</view>
                        </view>
                    </view>
                    <view class="discuss-bottom" @tap="handleShowAnswer">
                        <img v-if="!showAnswer" :src="imgUrl+'/inClass/teacher/icon_down2.png'" />
                        <img v-if="showAnswer" :src="imgUrl+'/inClass/teacher/icon_up2.png'" />
                        <span>查看答案解析</span>
                    </view>
                </view>
            </view>
            <!-- 简答题不显示这一块 -->
            <view class="singleChoose" v-if="question.questionType!=4">
                <view class="right">
                    <view v-if="question.questionType!=3">正确答案：{{question.answer}}</view>
                    <view>正确率：
                        <text v-if="commitedNum>0">{{rightPercent}}%</text>
                        <text v-else>0%</text>
                    </view>
                </view>
                <view class="tabDouble" v-if="question.questionType==1">
                    <block v-for="(item,index) in ['按选项查看','按结果查看']" :key="index">
                        <view class="tabDouble-item" @tap="handleTabLookfor(index)"><span :class = "{ 'active' : lookIndex == index} ">{{item}}</span></view>
                    </block>
                </view>
                <view class="singleContent" v-if="lookIndex==0">
                    <block v-for="(item,index) in questionStudent.userAnswersByOption" :key="index">
                        <view class="singleChoose-item">
                            <view class="singleChoose-top">
                                <view class="singleChoose-left" style="display:flex;flex-wrap:wrap;">
                                    <span>{{item.optionKey}}</span>
                                    <jyf-parser :html="item.optionValue" :tag-style="tagStyle" @imgtap="imgtap"></jyf-parser>
                                </view>
                            </view>
                            <view class="singleChoose-bottom">
                                <progress active-mode='forwards' duration=3 v-if="item.isRightAnswer == 1" :percent="toDecimal2(item.list.length)" activeColor="#00C759" active stroke-width="8" border-radius="4"/>
                                <progress active-mode='forwards' duration=3 v-if="item.isRightAnswer == 0" :percent="toDecimal2(item.list.length)" activeColor="#FF766D" active stroke-width="8" border-radius="4"/>
                                <view class="singleChoose-right"><span>{{item.list.length}}人</span>
                                    <text v-if="item.list.length>0">{{toDecimal2(item.list.length)}}%</text>
                                    <text v-else>0%</text>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
                <!-- 多选 按结果查看 -->
                <view class="singleContent" v-if="lookIndex==1">     
                    <view class="nodata" v-if="doubleArr.length == 0">
                        <img :src="imgUrl+'no.png'">
                        暂时没有人提交哦
                    </view>
                    <block v-for="(item,index) in doubleArr" :key="index">
                        <view class="singleChoose-item">
                            <view class="singleChoose-top">
                                <view class="singleChoose-left"><span>{{item.option}}</span></view>
                            </view>
                            <view class="singleChoose-bottom">
                                <progress active-mode='forwards' duration=3 v-if="item.option == question.answer" :percent="toDecimal2(item.list.length)" activeColor="#00C759" active stroke-width="8" border-radius="4"/>
                                <progress active-mode='forwards' duration=3 v-else :percent="toDecimal2(item.list.length)" activeColor="#FF766D" active stroke-width="8" border-radius="4"/>
                                <view class="singleChoose-right"><span>{{item.list.length}}人</span>{{toDecimal2(item.list.length)}}%</view>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
        <view class="answer">
            <!-- 简答题不显示这一块 -->
            <view class="answer-top" v-if="question.questionType!=4">
                <view class="title-item" @tap="handleTabAnswer(0)"><span :class = "{ 'active' : answerIndex == 0} ">已答题（{{commitedNum}}人）</span></view>
                <view class="title-item" @tap="handleTabAnswer(1)"><span :class = "{ 'active' : answerIndex == 1} ">未答题（{{unCommitedNum}}人）</span></view>
            </view>
            <!-- 简答题头部显示这一块 -->
            <view class="simple-top" v-if="question.questionType==4">
                <view class="simple-left">
                    <view class="title-item" @tap="handleTabAnswer(0)"><span :class = "{ 'active' : answerIndex == 0} ">已答题（{{commitedNum}}人）</span></view>
                    <view class="title-item" @tap="handleTabAnswer(1)"><span :class = "{ 'active' : answerIndex == 1} ">未答题（{{unCommitedNum}}人）</span></view>
                </view>
                <view class="simple-right" @tap="handleMark">
                    <img :src="imgUrl+'teach/selection.png'" v-if="isMarked">
                    <img :src="imgUrl+'teach/option.png'" v-else>
                    <span>只看未批</span>
                </view>
            </view>
            <!-- 简答题不显示这一块 -->
            <view class="content" v-if="answerIndex == 0 && lookIndex == 0 && (question.questionType!=4 && question.questionType!=3)">
                <block v-for="(item,index) in questionStudent.userAnswersByOption" :key="index">
                    <view class="content-item" :class = "{ 'content-item-active' : item.isRightAnswer}">
                        <img :src="imgUrl+'/inClass/exam/rightAnswer1.png'" v-if="item.isRightAnswer">
                        <view class="item-right">
                            <view class="item-top" @tap="handleShouqi(index)">
                                <img :src="imgUrl+'/inClass/exam/down-hui1.png'" v-if="!item.shouqi && !item.isRightAnswer">
                                <img :src="imgUrl+'/inClass/exam/up-hui1.png'" v-if="item.shouqi && !item.isRightAnswer">
                                <img :src="imgUrl+'/inClass/exam/down-lv1.png'" v-if="!item.shouqi && item.isRightAnswer">
                                <img :src="imgUrl+'/inClass/exam/up-lv.png'" v-if="item.shouqi && item.isRightAnswer">
                                <view v-if="item.isRightAnswer" style="color:#00C759;">{{item.optionKey}}</view>
                                <view v-else>{{item.optionKey}}</view>
                            </view>
                            <view class="item-bottom" v-if="item.shouqi">
                                <view class='noVote' v-if="item.list.length == 0">
                                        暂时没有人选择哦
                                </view>
                                <block v-for="(item1,index1) in item.list" :key="index1">
                                    <view class="item-user">
                                        <img v-if=" (item1.headUrl.indexOf(defaultAv1) == -1 && item1.headUrl.indexOf(defaultAv2) == -1)"  :src="item1.headUrl">
                                        <view  v-if=" (item1.headUrl.indexOf(defaultAv1) > 0 || item1.headUrl.indexOf(defaultAv2) > 0)">{{subStrName(item1.name)}}</view>
                                        <span>{{item1.name}}</span>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <!-- 多选题 按结果查看 -->
            <view class="content" v-if="answerIndex == 0 && lookIndex == 1 && (question.questionType!=4 && question.questionType!=3)">
                <view class="nodata" v-if="doubleArr.length == 0" style="padding:8% 0;">
                    <img :src="imgUrl+'no.png'">
                    暂时没有人提交哦
                </view>
                <block v-for="(item,index) in doubleArr" :key="index">
                    <view class="content-item" :class = "{ 'content-item-active' : item.option == question.answer}">
                        <img :src="imgUrl+'/inClass/exam/rightAnswer.png'" v-if="item.option == question.answer">
                        <view class="item-right">
                            <view class="item-top" @tap="handleShouqi1(index)">
                                <img :src="imgUrl+'/inClass/exam/down-hui1.png'" v-if="!item.shouqi && item.option != question.answer">
                                <img :src="imgUrl+'/inClass/exam/up-hui1.png'" v-if="item.shouqi && item.option != question.answer">
                                <img :src="imgUrl+'/inClass/exam/down-lv1.png'" v-if="!item.shouqi && item.option == question.answer">
                                <img :src="imgUrl+'/inClass/exam/up-lv.png'" v-if="item.shouqi && item.option == question.answer">
                                <view v-if="item.isRightAnswer" style="color:#00C759;">{{item.option}}</view>
                                <view v-else>{{item.option}}</view>
                            </view>
                            <view class="item-bottom" v-if="item.shouqi">
                                <view class='noVote' v-if="item.list.length == 0">
                                        暂时没有人选择哦
                                </view>
                                <block v-for="(item1,index1) in item.list" :key="index1">
                                    <view class="item-user">
                                        <img v-if=" (item1.headUrl.indexOf(defaultAv1) == -1 && item1.headUrl.indexOf(defaultAv2) == -1)"  :src="item1.headUrl">
                                        <view  v-if=" (item1.headUrl.indexOf(defaultAv1) > 0 || item1.headUrl.indexOf(defaultAv2) > 0)" >{{subStrName(item1.name)}}</view>
                                        <span>{{item1.name}}</span>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <!-- 填空题 -->
            <view class="content" v-if="answerIndex == 0 && question.questionType == 3">
                <block v-for="(item,index) in blankArr" :key="index">
                    <view class="content-item" :class = "{ 'content-item-active' : index == 0}">
                        <img :src="imgUrl+'/inClass/exam/rightAnswer.png'" v-if="index == 0">
                        <view class="item-right">
                            <view class="item-top" @tap="handleShouqi2(index)">
                                <img :src="imgUrl+'/inClass/exam/down-hui1.png'" v-if="!item.shouqi && index != 0">
                                <img :src="imgUrl+'/inClass/exam/up-hui1.png'" v-if="item.shouqi && index != 0">
                                <img :src="imgUrl+'/inClass/exam/down-lv1.png'" v-if="!item.shouqi && index == 0">
                                <img :src="imgUrl+'/inClass/exam/up-lv.png'" v-if="item.shouqi && index == 0">
                                <view v-if="index == 0" style="color:#00C759;">{{item.option}}</view>
                                <view v-else>{{item.option}}</view>
                            </view>
                            <view class="item-bottom" v-if="item.shouqi">
                                <view class='noVote' v-if="item.list.length == 0">
                                        暂时没有人选择哦
                                </view>
                                <block v-for="(item1,index1) in item.list" :key="index1">
                                    <view class="item-user">
                                        <img v-if=" (item1.headUrl.indexOf(defaultAv1) == -1 && item1.headUrl.indexOf(defaultAv2) == -1)"  :src="item1.headUrl">
                                        <view  v-if=" (item1.headUrl.indexOf(defaultAv1) > 0 || item1.headUrl.indexOf(defaultAv2) > 0)" >{{subStrName(item1.name)}}</view>
                                        <span>{{item1.name}}</span>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <!-- 简答题显示这一块 -->
            <view class="content" v-if="answerIndex == 0 && question.questionType==4">
                <view class="nodataHalfWhite" v-if="discussArr.length == 0" style="height: calc(100vh - 770rpx);">
                    <view>
                        <img :src="imgUrl+'no.png'">
                        暂无数据
                    </view>
                </view>
                <block v-for="(item,index) in discussArr" :key="index">
                    <view class="discuss-item">
                        <view class="discuss-top">
                            <view class="discuss-left">
                                <img :src="item.headUrl">
                                <span style="flex:1">{{item.name}}</span>
                            </view>
                            <view class="discuss-right"  @tap="openPopup(item.id)">
                                <span v-if="!item.marked">评分</span>
                                <span v-else>{{item.point}}分</span>
                                <img :src="imgUrl+'/inClass/exam/icon_right1.png'">
                            </view>
                        </view>
                        <view class="discuss-main1">
                            {{item.answer}}
                            <view class="item-img" v-if="item.link.length>0">
                                <block v-for="(item1,index1) in item.arr" :key="index1">
                                    <view class="img-item" @tap="previewImg(item.arr,index1)">
                                        <img :src="item1" alt="">
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <!-- 未答题 -->
            <view class="content-wei" v-if="answerIndex == 1">
                <view class="nodata" v-if="unCommitedStu.length == 0" style="height: calc(100vh - 790rpx);">
                    <img :src="imgUrl+'no.png'">
                    暂时没有数据
                </view>
                <block v-for="(item,index) in unCommitedStu" :key="index">
                    <view class="item-user">
                        <img v-if=" (item.headUrl.indexOf(defaultAv1) == -1 && item.headUrl.indexOf(defaultAv2) == -1)"  :src="item.headUrl">
                        <view  v-if=" (item.headUrl.indexOf(defaultAv1) > 0 || item.headUrl.indexOf(defaultAv2) > 0)" >{{subStrName(item.userName)}}</view>
                        <span>{{item.userName}}</span>
                    </view>
                </block>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                imgUrl: this.$CDNURL.IMGURL,
                isIphonex: this.$commonData.globalData.isIphonex,
                subStrName: this.$tools.subStrName,
                tagStyle: {
                    img: "border-radius: 8rpx;border: 2rpx solid #D1D4D8;display:inline-block;",
                    p: "font-size:28rpx;color:#666666;"
                },
                defaultAv1: 'cdn/static/images/defaultTeacher.png',
                defaultAv2: 'cdn/static/images/defaultStu.png',
                discussArr:[],
                doubleArr:[],
                blankArr:[],
                rightPercent:0,  //正确率
                analysis:'',
                showAnswer: false, //查看解析
                lookIndex: 0,
                answerIndex: 0,
                isMarked:false //只看未批
            }
		},
        props:{
			question: {
				type: Object,
				default: {}
			},
			questionStudent: {
				type: Object,
				default: {}
			},
			unCommitedStu:{
				type: Array,
				default: []
			},
            commitedNum: {
				type: Number,
				default: 0
			},
            unCommitedNum: {
				type: Number,
				default: 0
			},
            topicIndex: {
				type: Number,
				default: 0
			},
            topicLength: {
				type: Number,
				default: 0
			},
            source: {   //来源，1代表试卷，0代表题目
                type: String,
				default: '1'
            }
		},
        mounted() {
            this.handleData()
		},
        beforeUpdate(){
            this.handleData()
        },
        watch: {
            questionStudent (val) {
                this.handleData()
            }
        },
        methods: {
            handleData(){
                this.analysis = this.question.analysis
                if(this.question.questionType == 0 || this.question.questionType == 2){
                    this.questionStudent.userAnswersByOption.forEach(item=>{
                        if(item.isRightAnswer == 1){
                            this.rightPercent = this.toDecimal2(item.list.length)
                        }
                    })
                }
                if(this.question.questionType==4){
                    if(this.questionStudent.userAnswersByResult[0].list.length > 0){
                        this.questionStudent.userAnswersByResult[0].list.forEach(item=>{
                            let arr = item.link.split(',')
                            this.$set(
                                item,"arr",arr
                            );
                        })
                        this.discussArr = this.questionStudent.userAnswersByResult[0].list
                        if(this.isMarked){
                            let arr = []
                            this.discussArr.forEach(item=>{
                                if(item.marked == 0) {
                                    arr.push(item)
                                }
                            })
                            this.discussArr = arr
                        }
                    }
                }
                if(this.question.questionType==1){
                    this.doubleArr = this.questionStudent.userAnswersByResult
                    if(this.doubleArr.length>0){
                        this.doubleArr.forEach(item=>{
                            if(item.option == this.question.answer){
                                this.rightPercent = this.toDecimal2(item.list.length)
                            }
                        })
                    }
                }
                if(this.question.questionType==3){
                    this.blankArr = this.questionStudent.userAnswersByResult
                    this.rightPercent = this.toDecimal2(this.blankArr[0].list.length)
                }
            },
            handleShowAnswer(){
                this.showAnswer = !this.showAnswer
            },
            // 保留两位小数
            toDecimal2(x){
                let res = ''
                res = Number.isInteger((x/(this.commitedNum))*100) ? (x/this.commitedNum)*100 : ((x/this.commitedNum)*100).toFixed(2)
                return res
            },
            imgtap(e){
                // console.log(e)
            },
            previewImg(arr,index){
				uni.previewImage({
					urls:arr,
					current:index,
                    fail: function(err) {
                        this.$autoJump.openPageViewFiles(
                            getCurrentPages()[getCurrentPages().length - 1].route,
                            'notSupportView',
                            {
                                name:'图片预览',
                                text:'预览'
                            })
                    }
				});
			},
            handleTabLookfor(index){
                this.lookIndex = index
            },
            handleTabAnswer(index){
                this.answerIndex = index
            },
            handleShouqi(num) {
                this.questionStudent.userAnswersByOption.forEach((item,index) => {
                    if(num==index){
                        item.shouqi = !item.shouqi
                    }
                });
            },

            handleShouqi1(num) {
                this.doubleArr.forEach((item,index) => {
                    if(num==index){
                        item.shouqi = !item.shouqi
                    }
                });
            },
            handleShouqi2(num) {
                this.blankArr.forEach((item,index) => {
                    if(num==index){
                        item.shouqi = !item.shouqi
                    }
                });
            },
            handleMark(){
                this.isMarked = !this.isMarked
                if(this.isMarked){
                    let arr = []
                    this.discussArr.forEach(item=>{
                        if(item.marked == 0) {
                            arr.push(item)
                        }
                    })
                    this.discussArr = arr
                }else {
                    this.$emit('getData')
                }
            },
            openPopup(id){
                this.$emit('mark',id)
            },
            handleJump(){
                this.$emit('jump')
            }
        }
	}
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
    .block {
        .title {
            background-color: #fff;
            margin-bottom: 20rpx;
            .title-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 26rpx 30rpx 22rpx 30rpx;
                border-bottom: 2rpx solid #F2F2F2;
                .title-top-left {
                    margin-right: 20rpx;
                    >span {
                        font-size: 32rpx;
                        color: #989898;
                    }
                    >text {
                        font-size: 28rpx;
                        color:#252525;
                        font-weight: 600;
                    }
                }
                >img {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .title-bottom {
                padding: 22rpx 30rpx 34rpx 30rpx;
            }
            .title-discuss {
                .discuss-main {
                    padding: 22rpx 30rpx 34rpx 30rpx;
                }
                .discuss-bottom {
                    padding: 12rpx 18rpx 14rpx 0;
                    border-top: 2rpx solid #F2F2F2;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    font-size: 24rpx;
                    color:#858F99;
                    >img {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right:4rpx;
                    }
                }
                .discuss-answer {
                    padding: 42rpx 30rpx;
                    background: #fff;
                    >view {
                        margin-bottom: 44rpx;
                        >img {
                            width: 80rpx;
                            height: 44rpx;
                            margin-bottom: 28rpx;
                        }
                        >view {
                            font-size: 28rpx;
                            color: #666666;
                        }
                    }
                }
            }
        }
        .singleChoose {
            background-color: #fff;
            .tabDouble {
                display: flex;
                margin: 8rpx 0;
                .tabDouble-item {
                    padding: 20rpx 0 0 0;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 28rpx;
                    font-weight: 600;
                    color:#7A848E;
                    span {
                        padding: 0 18rpx 16rpx;
                    }
                    .active {
                        color: #333333;
                        border-bottom: 4rpx solid $uni-color-primary;
                    }
                }
            }
            .right {
                padding: 16rpx 30rpx;
                border-bottom: 2rpx solid #F2F2F2;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                >view {
                    padding: 4rpx 12rpx;
                    background: #F4F7F6;
                    border-radius: 4px;
                    font-size: 22rpx;
                    color: #7ACFA0;
                    &:first-child {
                        margin-right: 16rpx;
                    }
                }
            }
            .singleContent {
                padding: 20rpx 0 32rpx;
                .singleChoose-item {
                    padding: 16rpx 30rpx;
                    .singleChoose-top {
                        padding-bottom: 8rpx;
                        .singleChoose-left {
                            font-size: 28rpx;
                            color:#666666;
                            span {
                                margin-right: 22rpx;
                            }
                        }
                    }
                    .singleChoose-bottom {
                        display: flex;
                        align-items: center;
                        progress {
                            flex: 1;
                        }
                        .singleChoose-right {
                            margin-left: 6rpx;
                            font-size: 22rpx;
                            color: #7A848E;
                            span {
                                display: inline-block;
                                width: 80rpx;
                                text-align: right;
                                margin-right: 4rpx;
                            }
                            text {
                                display: inline-block;
                                width: 100rpx;
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
    }
    .answer {
        margin-top: 20rpx;
        padding-bottom:32rpx;
        background-color: #fff;
        .answer-top {
            display: flex;
            padding: 20rpx 0 0;
            margin-bottom: 15rpx;
            .title-item {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                font-weight: 600;
                color:#7A848E;
                span {
                    padding: 0 18rpx 16rpx;
                }
                .active {
                    color:#333333;
                    border-bottom: 4rpx solid $uni-color-primary;
                }
            }
        }
        .simple-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 30rpx 0 30rpx;
            margin-bottom: 15rpx;
            .simple-left {
                flex: 1;
                display: flex;
                .title-item {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 28rpx;
                    font-weight: 600;
                    color:#7A848E;
                    span {
                        padding: 0 0 16rpx 0;
                    }
                    .active {
                        color:#333333;
                        border-bottom: 4rpx solid $uni-color-primary;
                    }
                }
            }
            .simple-right {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: #7A848E;
                margin-left: 60rpx;
                >img {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 12rpx;
                }
            }
        }
        .content {
            margin: 0 30rpx;
            .content-item {
                margin-bottom: 20rpx;
                background: #F4F7F6;
                border-radius: 8rpx;
                position: relative;
                padding: 30rpx;
                &:last-child {
                    margin-bottom: 0;
                }
                >img {
                    width: 40rpx;
                    height: 40rpx;
                    position: absolute;
                    top: 0;
                    right: 0;
                }
                .item-right {
                    flex: 1;
                    .item-top {
                        display: flex;
                        align-items: center;
                        >img {
                            width: 32rpx;
                            height: 32rpx;
                            margin-right: 14rpx;
                        }
                        >view {
                            font-size: 28rpx;
                            color: #666666;
                        }
                    }
                    .item-bottom {
                        display: flex;
                        flex-wrap: wrap;
                        padding-top: 28rpx;
                        .item-user {
                            width: 196rpx;
                            display: flex;
                            align-items: center;
                            font-size: 24rpx;
                            color: #333333;
                            margin-right: 15rpx;
                            padding: 8rpx 0;
                            >img {
                                width: 64rpx;
                                height: 64rpx;
                                border-radius: 50%;
                                margin-right: 8rpx;
                                border: 2rpx solid white;
                            }
                            >view {
                                text-align:center;
                                border-radius:50%;
                                color:#fff;
                                width: 64rpx;
                                height:64rpx;
                                line-height:64rpx;
                                margin-right: 8rpx;
                                background: #7ACFA0;
                                font-size: 22rpx;
                                border: 2rpx solid white;
                            }
                            >span {
                                display: inline-block;
                                width: 120rpx;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
            }
            .content-item-active {
                background-color: #E6FBEF;
            }
            .discuss-item {
                margin-bottom: 24rpx;
                .discuss-top {
                    padding: 16rpx 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .discuss-left {
                        display: flex;
                        align-items: center;
                        font-size: 24rpx;
                        color: #333333;
                        img {
                            width: 64rpx;
                            height: 64rpx;
                            border-radius: 50%;
                            margin-right: 8rpx;
                            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
                            border: 2px solid #FFFFFF;
                        }
                    }
                    .discuss-right {
                        display: flex;
                        align-items: center;
                        font-size: 28rpx;
                        color: $uni-color-primary;
                        >img {
                            width: 32rpx;
                            height: 32rpx;
                        }
                    }
                }
                .discuss-main1 {
                    margin-left: 72rpx;
                    width:618rpx;
                    // height:312rpx;
                    background:#F4F7F6;
                    padding: 26rpx 24rpx;
                    border-radius:8rpx;
                    box-sizing: border-box;
                    font-size: 28rpx;
                    color: #666666;
                    word-wrap:break-word;
                    word-break:break-all;
                }
            }
        }
        .content-wei {
            margin: 0 30rpx;
            padding: 24rpx 30rpx;
            background:#F4F7F6;
            border-radius:8rpx;
            display: flex;
            flex-wrap: wrap;
            .item-user {
                width: 196rpx;
                display: flex;
                align-items: center;
                font-size: 24rpx;
                color: #333333;
                margin-right: 15rpx;
                padding: 8rpx 0;
                >img {
                    width: 64rpx;
                    height: 64rpx;
                    border-radius: 50%;
                    margin-right: 8rpx;
                    border: 2rpx solid white;
                }
                >view {
                    text-align:center;
                    border-radius:50%;
                    color:#fff;
                    width: 64rpx;
                    height:64rpx;
                    line-height:64rpx;
                    margin-right: 8rpx;
                    background: #7ACFA0;
                    font-size: 22rpx;
                    border: 2rpx solid white;
                }
                >span {
                    display: inline-block;
                    width: 120rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
</style>
